<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可视化</title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/echarts.min.js">
		</script>

	</head>
	<body>
		<header>
			<h1>数据可视化</h1>
			<div class="showTime">
				<!-- 北京时间 -->
			</div>
		</header>
		<!-- 以下页面主体 -->
		<section class="mainbox">
			<div class="column">
				<!-- 公用样式 -->
				<div class="panel bar">
					<h2>柱形图 </h2>
					<div class="chart">
						<!-- 数据图-->
					</div>
					<div class="panel-footer"></div>

				</div>
				<div class="panel line">
					<h2>折线图<a href="javasript:;">2020</a>
					<a href="javasript:;">2021</a></h2>
					<div class="chart">
						<!-- 放图 -->
					</div>
					<div class="panel-footer">
						<!-- 角标 -->
					</div>

				</div>
				<div class="panel pie">
					<h2>扇形图</h2>
					<div class="chart">
						<!-- 放图 -->
					</div>
					<div class="panel-footer">
						<!--  -->
					</div>

				</div>
			</div>
			<div class="column">
				<div class="no">
					<!-- 数字展示 -->
					<div class="no-hd">
						<ul>
							<li>1231</li>
							<li>123123</li>
						</ul>
					</div>
					<div class="no-bd">
						<ul>
							<li>需求</li>
							<li>供用</li>
						</ul>
					</div>
				</div>
				<div class="map">
					<!-- 地图 模块-->
					<div class="map1">
						<!-- 背景旋转图 -->
					</div>
					<div class="map2">
						<!-- 背景旋转图 -->
					</div>
					<div class="map3">
						<!-- 背景旋转图 -->
					</div>
					<div class="chart">
						
					</div>
					
				</div>
			</div>
			<div class="column">
				<div class="panel bar2">
					<h2>柱形图</h2>
					<div class="chart">
						<!-- 放图 -->

					</div>

					<div class="panel-footer"></div>

				</div>
				<div class="panel line2">
					<h2>折线图</h2>
					<div class="chart">
						<!-- 放图 -->
					</div>
					<div class="panel-footer"></div>

				</div>
				<div class="panel pie2">
					<h2>扇形图</h2>
					<div class="chart">
						<!-- 放图 -->
					</div>
					<div class="panel-footer"></div>

					</div>
					</div>
		</section>















		<script>
			// 时间代码
			var t = null;
			t = setTimeout(time, 1000); //開始运行
			function time() {
				clearTimeout(t); //清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours(); //获取时
				var m = dt.getMinutes(); //获取分
				var s = dt.getSeconds(); //获取秒
				document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" +
					s + "秒";
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}
		</script>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/china.js" type="text/javascript" charset="utf-8">
		// 引入中国文件
		</script>
		<script src="../js/myMap.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>
